<template>
    <PageView :loading="userManagerStore.isPageLoading">
        <div>
            <!-- 筛选数据的表单 -->
            <vxe-form ref="formRef"
                      title-colon
                      :rules="userManagerStore.formRules"
                      :valid-config="{theme: 'normal'}" @reset="userManagerStore.resetFormData">

                <!-- 所属机构 -->
                <vxe-form-item span="6" title="所属机构" field="orgId" :item-render="{}">
                    <template #default>
                        <vxe-select v-model="userManagerStore.formData.orgId"
                                    placeholder="请选择机构"
                                    clearable
                                    filterable>
                            <vxe-option v-for="item in userManagerStore.orgInfoList"
                                        :key="item.orgId"
                                        :value="item.orgId"
                                        :label="item.orgName"/>
                        </vxe-select>
                    </template>
                </vxe-form-item>

                <!-- 用户编号 -->
                <vxe-form-item span="6" title="用户编号" field="userId" :item-render="{}">
                    <template #default>
                        <vxe-input v-model="userManagerStore.formData.userId" placeholder="请输入用户编号"/>
                    </template>
                </vxe-form-item>

                <!-- 用户名称 -->
                <vxe-form-item span="6" title="用户名称" field="userName" :item-render="{}">
                    <template #default>
                        <vxe-input v-model="userManagerStore.formData.userName" placeholder="请输入用户名称"/>
                    </template>
                </vxe-form-item>

                <!-- 用户账号 -->
                <vxe-form-item span="6" title="用户账号" field="userAccount" :item-render="{}" folding>
                    <template #default>
                        <vxe-input v-model="userManagerStore.formData.userAccount" placeholder="请输入用户账号"/>
                    </template>
                </vxe-form-item>

                <!-- 用户邮箱 -->
                <vxe-form-item span="6" title="用户邮箱" field="userEmail" :item-render="{}" folding>
                    <template #default>
                        <vxe-input v-model="userManagerStore.formData.userEmail" placeholder="请输入用户邮箱"/>
                    </template>
                </vxe-form-item>

                <!-- 查询按钮 -->
                <vxe-form-item span="6" collapse-node :item-render="{}">
                    <template #default>
                        <vxe-button icon="vxe-icon-search"
                                    type="submit"
                                    status="primary"
                                    content="查询"
                                    @click="userManagerStore.queryUserList()"/>
                        <vxe-button icon="vxe-icon-repeat" type="reset" content="重置"/>
                    </template>
                </vxe-form-item>
            </vxe-form>

            <!-- 表格的工具栏 -->
            <vxe-toolbar ref="toolbarRef"
                         :buttons="toolbarButtons"
                         @button-click="buttonClickEvent"
                         custom/>

            <!-- 表格 -->
            <vxe-table
                ref="tableRef"
                border
                stripe
                empty-text="暂无数据"
                min-height="300"
                :loading="userManagerStore.isTableLoading"
                :column-config="{resizable: true}"
                :row-config="{isHover: true}"
                :checkbox-config="{labelField: 'id', highlight: false, range: true}"
                :data="userManagerStore.tableDataList">
                <vxe-column field="userId" title="用户编号" min-width="220px" show-overflow/>
                <vxe-column field="userName" title="用户名称" min-width="60px" show-overflow/>
                <vxe-column field="account" title="账号" min-width="100px" show-overflow/>
                <vxe-column field="userEmail" title="邮箱" min-width="100px" show-overflow/>

                <vxe-column title="所属机构" min-width="100px" show-overflow>
                    <template #default="{row}">
                        {{ row.organizationInfo?.orgName }}
                    </template>
                </vxe-column>

                <vxe-column title="用户登录状态" min-width="50px" show-overflow/>

                <vxe-column title="操作" fixed="right" width="200px">
                    <template #default="{row}">
                        <vxe-button mode="text"
                                    status="primary"
                                    icon="vxe-icon-file-txt"
                                    @click="showDetailModel(row)"
                                    content="查看详情"/>

                        <vxe-button mode="text"
                                    status="danger"
                                    icon="vxe-icon-edit"
                                    @click="showEditModel(row)"
                                    content="编辑"/>
                    </template>
                </vxe-column>
            </vxe-table>

            <!-- 分页导航栏 -->
            <vxe-pager
                style="margin-top: 10px"
                align="right"
                v-model:currentPage="userManagerStore.pageNum"
                v-model:pageSize="userManagerStore.pageSize"
                :total="userManagerStore.totalRow"
                @page-change="userManagerStore.queryUserList()">
            </vxe-pager>
        </div>

        <!-- 用户详情信息弹窗 -->
        <UserDetailInfoComponent :user-info="userManagerStore.selectedUserInfo"/>

        <!-- 用户编辑信息弹窗 -->
        <UserEditComponent/>
    </PageView>
</template>
<script setup lang="ts">
import PageView from '@/views/layout/PageView.vue';
import { onMounted, ref } from 'vue';
import { VxeTableInstance, VxeToolbarEvents, VxeToolbarInstance, VxeToolbarPropTypes } from 'vxe-table';
import MessageUtils from '@/utils/MessageUtils.ts';
import { useUserManagerStore } from '@/store/UseUserManagerStore.ts';
import UserDetailInfoComponent from '@/views/user/UserDetailInfoComponent.vue';
import { UserInfoVO } from '@/entiy/vo/UserInfoVO.ts';
import UserEditComponent from '@/views/user/UserEditComponent.vue';

const userManagerStore = useUserManagerStore();
const toolbarRef = ref<VxeToolbarInstance>();
const tableRef = ref<VxeTableInstance>();

// 表格工具栏配置
const toolbarButtons = ref<VxeToolbarPropTypes.Tools>([
    {
        name: '新增',
        code: 'add',
        status: 'primary',
        icon: 'vxe-icon-add',
        size: 'small'
    },
]);

// 工具栏点击事件
const buttonClickEvent: VxeToolbarEvents.ButtonClick = ({code}) => {
    switch (code) {
        case 'add':
            // systemRoleManagerStore.isShowAddModel = true;
            break;
        case 'del':
            // systemRoleManagerStore.isShowDelModel = true;
            break;
        case 'save':
            // systemRoleManagerStore.isShowSaveModel = true;
            break;
        default:
            break;
    }
};

onMounted(() => {
    // 如果使用内置功能，需要先关联表格，通过调用 connect() 方法与表格进行关联，就可以开启相关的功能
    const $table = tableRef.value;
    const $toolbar = toolbarRef.value;
    if ($table && $toolbar) {
        $table.connect($toolbar);
    }

    // 加载机构信息列表数据
    userManagerStore.queryOrgList().catch((reason) => {
        MessageUtils.showErrorMessage(reason.message);
    });

    // 加载用户信息列表数据
    userManagerStore.queryUserList().catch((reason) => {
        MessageUtils.showErrorMessage(reason.message);
    });
});

// 显示用户详情信息
const showDetailModel = (row: UserInfoVO) => {
    userManagerStore.isShowDetailModel = true;
    userManagerStore.selectedUserInfo = row;
};

// 显示用户详情信息
const showEditModel = (row: UserInfoVO) => {
    userManagerStore.isShowEditModel = true;
    userManagerStore.selectedUserInfo = row;
    const organizationInfo = userManagerStore.selectedUserInfo.organizationInfo;

    userManagerStore.editFormData.userId = row.userId;
    userManagerStore.editFormData.userName = row.userName;
    userManagerStore.editFormData.account = row.account;
    userManagerStore.editFormData.userEmail = row.userEmail;

    if (organizationInfo?.orgId) {
        userManagerStore.editFormData.orgId = organizationInfo.orgId;
    } else {
        userManagerStore.editFormData.orgId = '';
    }

    if (organizationInfo?.orgName) {
        userManagerStore.editFormData.orgName = organizationInfo.orgName;
    } else {
        userManagerStore.editFormData.orgName = '';
    }
};
</script>
